import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import './index.scss'
import '../../components/text/index.css'
import axios from '../../components/axios'
import pubsub from 'pubsub-js'
export default class index extends Component {
    constructor(props){
        super(props)
        this.state={
            data:[],
            id:this.props.location.pathname.split("/")[this.props.location.pathname.split("/").length-1]//获取动态路由传过来的值
        }
    }
    componentDidMount(){
        pubsub.publish("component","文章")
        axios("content",{"where":`where id='${this.state.id}'`}
        ).then(result=>{
            console.log(result);
            this.setState({data:result.data[0]});
        }).catch(err=>{
            console.log(err);
        })
    }
    
    render() {
        let html=this.state.data.html
        return (
            <div>
                <div className="content-inner">
                    <div className="content-article">
                    <h2 className="content-article-title">{this.state.data.title}</h2>
                    <p className="content-article-time">发表于 <span>{this.state.data.time}</span> | 更新于: <span>{this.state.data.changeTime}</span> | 分类于 <NavLink to={{pathname:"/search",state:{data:this.state.data.tags,type:"标签"}}}>{this.state.data.tags}</NavLink></p>
                    {(()=>{
                        function createMarkup(){
                            return { __html: html }
                        }
                        function MyComponent(){
                            return (
                                <p className="content-article-preview" dangerouslySetInnerHTML={createMarkup()}></p>
                            )
                        }
                        return MyComponent()
                    })()}
                    <a href="javascript:window.history.back()" className="go-1">返回上一页</a>
                    </div>
                </div>
            </div>
        )
    }
}
